<script lang="ts" setup>
import { computed, ref } from "vue";
import Item from "./components/Item.vue";
import { useRequest } from "@/utils/hooks";
import { partList } from "@/services/platformService/appPart"
import { useRoute } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { arrayTreeAddLevel, composeTree } from "@/utils/utils"
const keyword = ref("");
const route = useRoute();
const userStore = useUserStore();

// 分类及app片段列表
const {
    data,
} = useRequest(() => partList({
    appId: route.params.appId as string,
    page: 1,
    size: 1000,
    tenantId: userStore.getTenantId,
}));

const list = computed(() => {
    const dataList = keyword.value ? data.value?.appPartList?.filter((val) => val.partName.includes(keyword.value) && val.partType === 'form') : data.value?.appPartList;
    const tree = composeTree(dataList ?? [], 'appPartId', 'parentPartId')
    return arrayTreeAddLevel(tree)
})

</script>
<template>
    <div class="main">
        <van-search v-model="keyword" placeholder="搜索应用" input-align="center" />
        <div class="list">
            <Item :current-item="item" v-for="item in list" :key="item.appPartId" />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.main {
    width: 100%;
    height: 100%;
    background-color: white;
    .list {
        padding: 0 32px;
    }
}
</style>